<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 1000px;
            height: 100px;
            border: 1px solid black;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color:deepskyblue ;
            /*
            复合动画animation，只有动画时长和延迟时间有先后顺序，其他没有顺序
            animation-name=wyd动画函数
            animation-duration=3s动画时长
            animation-delay=0.5s延迟时间
            animation-timing-function=linear设置动画方式
            animation-iteration-count=2动画播放的次数
            animation-direction=reverse动画的方向
            animation-fill-mode=forwards结束后停在哪里
            animation-play-state= running 暂停 播放
            */
            animation:wyd  3s 0.5s linear 2 reverse forwards running;
        }
        /*定义动画名称*/
        @keyframes wyd{
            /*起始帧，第一帧*/
            from{
                /*0可以不写*/
                transform: translate(0);
                /*动画结束后，布局是黑色*/
                background-color: black;
            }
            /*结束帧,第二帧*/
            to{
              transform: translate(900px);
                /*到最后一帧布局是红色*/
                background-color: red;
                /*延迟时间*/
                animation-delay: 0.5s;
            }
        }

        .outer:hover .inner{
            /*鼠标悬浮时停止动画*/
            animation-play-state: paused;
        }
    </style>
</head>
<body>

</body>
<div class="outer">
    <div class="inner"></div>
</div>
</html>